<template>
  <div class="box">
    <div id="container"></div>
    <div class="search">
      <el-select v-model="value" @change="changeSearch" clearable placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.deviceId"
          :label="item.deviceName"
          :value="item.center">
        </el-option>
      </el-select>
    </div>

  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import  {agentDevice} from '@/api/module/agentaddress.js'
export default {
  name: "agent",
  data(){
    return{
      map:null,
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }],
      value:'',
      center:[117.943433,28.454862],
      zoom:14,
    }
  },
  mounted(){
    //DOM初始化完成进行地图初始化
    this.initMap();
  },
  created(){
    this.initData()
  },
  methods:{
    changeSearch(value){
      console.log(value)
      this.center=value
      this.zoom=15
      if(!value){
        this.zoom=14
        this.center=[117.943433,28.454862]
      }
      this.initMap()
    },
    initData(){
      agentDevice({pageSize:100000}).then(response=>{

        response.rows.forEach(item=>{
          item.center=[item.longitude,item.latitude]
        })
        this.options=response.rows
        console.log(this.options)
      })
    },
    initMap(){
      AMapLoader.load({
        key:"fd840be990ce8278579f097b80f357e6",             // 申请好的Web端开发者Key，首次调用 load 时必填
        version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins:['AMap.Geocoder','AMap.ToolBar', 'AMap.Driving', 'AMap.MarkerClusterer'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap)=>{
        this.map = new AMap.Map("container",{  //设置地图容器id
          zoom:this.zoom,//级别
          center: this.center,//中心点坐标
          viewMode:'3D'//使用3D视图
        });
        this.getMarks()
      }).catch(e=>{
        console.log(e);
      })
    },
    getText(value){
      var text = {
        // 要展示的文字内容
        content: value,
        // 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
        direction: 'right',
        // 在 direction 基础上的偏移量
        offset: [5, -5],
        // 文字样式
        style: {
          // 字体大小
          fontSize: 12,
          // 字体颜色
          fillColor: '#22886f',
          // 描边颜色
          strokeColor: '#fff',
          // 描边宽度
          strokeWidth: 2,
        }
      }
      return text
    },
    async getMarks(){
      let  that = this
      var icon = {
        // 图标类型，现阶段只支持 image 类型
        type: 'image',
        // 图片 url
        // image: 'https://a.amap.com/jsapi_demos/static/demo-center/marker/express2.png',
        image: 'https://pic.616pic.com/ys_bnew_img/00/13/69/jcK9d5RfcJ.jpg',
        // 图片尺寸
        // size: [64, 30],
        size: [30, 60],

        // 图片相对 position 的锚点，默认为 bottom-center
        anchor: 'center',
      };

    const res= await agentDevice({pageSize:100000})
      // console.log(res.rows)
      var markerList = [];
      res.rows.forEach(item=>{
        let labelMarker = new AMap.LabelMarker({
          // name: '标注2', // 此属性非绘制文字内容，仅最为标识使用
          position: [item.longitude,item.latitude],
          zIndex: 16,
          // 将第一步创建的 icon 对象传给 icon 属性
          icon: icon,
          // 将第二步创建的 text 对象传给 text 属性
          text: that.getText(item.deviceName),
        })
        markerList.push(labelMarker)
      })
      // console.log(markerList)

      let  labelsLayer = new AMap.LabelsLayer({
        zooms: [3, 20],
        zIndex: 1000,
        // 该层内标注是否避让
        collision: true,
        // 设置 allowCollision：true，可以让标注避让用户的标注
        allowCollision: true,
      });
      // 添加一个 labelMarker
      labelsLayer.add(markerList);

     this.map.add(labelsLayer)
    }


  },
}
</script>

<style  scoped>
#container{
  padding:0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}
.box{
  position: relative;
}
.search{
  width: 300px;
  height: 60px;
  background-color: #fff;
  position: absolute;
  left: 20px;
  top: 20px;
  text-align: center;
  line-height: 60px;
}


</style>
